
<HTML>

<HEAD>
<TITLE>Third Test of Section 2.5 of CSS1 Spec</TITLE>

<STYLE TYPE="text/css">
P:first-letter.initial {color: red}
A:link:first-letter {color: lime}
A:first-letter:visited {color: blue}
P.initial:first-letter {color: yellow}
</STYLE>
</HEAD>



<BODY>

<h1 >Testing Third Testable Statement of Section 2.5 of CSS1 Spec</h1>




<ul>
<li>
3. When combined with classes or pseudo-classes, pseudo-elements must be
specified at the end of the selector.
</ul>

<h2>PASS CRITERIA:
</h2>
<p>
If statement #3 above is passed, then:
<p class=initial>
The first letter of this paragraph should be yellow; all other letters should
be UA-default.  The rule applied is "P.initial:first-letter {color: yellow}",
which has the pseudo-element at the end of the selector(THIS IS PROPER).
Notice that the first letter of this paragraph is not blue; there is another
rule in the source as "P:first-letter.initial {color: blue}", but this rule
is ignored, since the pseudo-element is at the beginning of the selector(THIS IS NOT PROPER).
<p>
<a href="ovalbbut.gif">This link</a> should be lime if unvisited, because of
the pseudo-class "A:link:first-letter {color: lime}", where the pseudo-element
is at the end of the selector(THIS IS PROPER).  <a href="ovalbbut.gif">This link</a> should be
UA-default if visited, because the pseudo-class "A:first-letter:visited {color: blue }" has the pseudo-element in the middle of the selector, not the end(THIS IS NOT PROPER).

Your browser should render this page similarly to this<a href="a253.gif">
reference image</a> or to this<a href="b253.gif">reference image</a>.
To move directly to the next test, click<a href="25-4.htm"> here</a>.
</BODY>
</HTML>
